<template>
  <div class="container">
    <top></top>
    <div class="bottom">
      <!-- 父容器的四个转角图片背景 -->
      <img class="leftUp" src="@/assets/aiScreen/leftUp.png" alt="left-up" />
      <img class="leftDown" src="@/assets/aiScreen/leftDown.png" alt="left-down" />
      <img class="rightUp" src="@/assets/aiScreen/rightUp.png" alt="right-up" />
      <img class="rightDown" src="@/assets/aiScreen/rightDown.png" alt="right-down" />
      <!-- 父容器的左右边框上的背景图片 -->
      <img class="leftBorder" src="@/assets/aiScreen/leftBorder.png" alt="left-border" />
      <img class="rightBorder" src="@/assets/aiScreen/rightBorder.png" alt="right-border" />
      <el-row type="flex" style="flex-direction: row; height: 100%">
        <el-col class="leftBg" :span="6" style="margin: 20px 0 15px 20px">
          <div class="leftBox">
            <libStatus></libStatus>
            <staffRank :Select="'left'" :chartData="kbClassSum"></staffRank>
            <categoryStats></categoryStats>
            <deepSeekTrain></deepSeekTrain>
          </div>
        </el-col>
        <el-col :span="12" style="margin: 5px 10px 14px">
          <div class="centerBox">
            <libIncrease></libIncrease>
            <deepSeekCall></deepSeekCall>
            <latestInquiry></latestInquiry>
          </div>
        </el-col>
        <el-col class="rightBg" :span="6" style="margin: 20px 20px 15px 0">
          <div class="rightBox">
            <netAcceleration></netAcceleration>
            <staffRank :Select="'right'" :chartData="acceDomainSum"></staffRank>
            <employeeRank></employeeRank>
            <deviceStatus></deviceStatus>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import top from "./components/top.vue";
import libStatus from "./components/libStatus.vue";
import staffRank from "./components/staffRank.vue";
import categoryStats from "./components/categoryStats.vue";
import deepSeekTrain from "./components/deepSeekTrain.vue";
import libIncrease from "./components/libIncrease.vue";
import deepSeekCall from "./components/deepSeekCall.vue";
import latestInquiry from "./components/latestInquiry.vue";
import netAcceleration from "./components/netAcceleration.vue";
import employeeRank from "./components/employeeRank.vue";
import deviceStatus from "./components/deviceStatus.vue";
import { connrequest } from "@/api/firstPage";

export default {
  name: "aiScreen",
  props: {},
  data() {
    return {
      acceDomainSum: [],
      kbClassSum: []
    };
  },
  mounted() {
    this.getKnowledgeSumGroupByUserID();
    this.getHistoryProxyLog();
  },
  watch: {},
  computed: {},
  methods: {
    async getHistoryProxyLog() {
      const data = {
        Paging: {
          QueryPageNo: 1,
          QueryPageLength: 10
        }
      };
      const res = await connrequest("GetHistoryProxyLog", data);
      if (res.Status.StatusCode === 0) {
        this.acceDomainSum = res.Data.map((item) => {
          return {
            Name: item.URL,
            Count: item.ProxyCount
          };
        });
      }
    },
    async getKnowledgeSumGroupByUserID() {
      const res = await connrequest("GetKnowledgeSumGroupByUserID");
      if (res.Status.StatusCode === 0) {
        this.kbClassSum = res.Data.map((item) => {
          return {
            Name: item.UserID,
            Count: item.Count
          };
        });
      }
    }
  },
  components: {
    top,
    libStatus,
    staffRank,
    categoryStats,
    deepSeekTrain,
    libIncrease,
    deepSeekCall,
    latestInquiry,
    netAcceleration,
    employeeRank,
    deviceStatus
  }
};
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: #031d31;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.bottom {
  position: relative;
  /* background-color: aqua; */
  flex: 1;
}
.leftUp {
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
}
.leftDown {
  position: absolute;
  z-index: 999;
  bottom: 0;
  left: 0;
}
.rightUp {
  position: absolute;
  z-index: 999;
  top: 0;
  right: 0;
}
.rightDown {
  position: absolute;
  z-index: 999;
  bottom: 0;
  right: 0;
}
.leftBorder {
  position: absolute;
  z-index: 999;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.rightBorder {
  position: absolute;
  z-index: 999;
  right: 0;
  top: 40%;
  transform: translateY(-50%);
}
.leftBg {
  background-image: url("../../assets/aiScreen/bg1.png"); /* 使用绝对路径引用背景图片 */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.rightBg {
  background-image: url("../../assets/aiScreen/bg1.png"); /* 使用绝对路径引用背景图片 */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.leftBox {
  display: flex;
  flex-direction: column;
  padding-right: 4px;
  height: 100%;
}
.centerBox {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.rightBox {
  display: flex;
  flex-direction: column;
  padding-right: 4px;
  height: 100%;
}
</style>
